<template>
	<div class="contain-page">
		<div class="body">
			<!-- 搜索区域 -->
			<div class="search-hd m-b2">
				<el-input class="sc-inp m-r1" v-model="name" placeholder="请输入菜单名称"></el-input>
				<el-button type="primary" icon="el-icon-search">搜索</el-button>
			</div>

			<!-- 表格操作区域 -->
			<div class="ctrl-hd m-b2">
				<el-button type="primary" icon="el-icon-plus" @click="addMenu">添加菜单</el-button>
			</div>

			<!-- 数据列表 -->
			<div class="table-data-wrap">
				<el-table :data="tableData" border class="mode-table" v-loading="loading">
					<el-table-column fixed="left" type="selection" width="50"></el-table-column>
					<el-table-column prop="sort" label="排序" width="80">
						<template slot-scope="scope">
							<el-input v-model="scope.row.sort" placeholder="排序"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="id" label="ID" width="60"></el-table-column>
					<el-table-column prop="name" label="名称" width="120"></el-table-column>
					<el-table-column prop="router" label="路由" width="180"></el-table-column>
					<el-table-column prop="date" label="添加时间"></el-table-column>
					<el-table-column prop="status" label="状态">
						<template slot-scope="scope">
							<el-switch :value="scope.row.status" active-color="#09f" inactive-color="#ccc" active-text="显示" inactive-text="隐藏">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="200">
						<template slot-scope="scope"> 
							<el-button type="text" size="small" @click="editMenu(scope.row.id)">编辑</el-button>
							<el-button type="text" size="small" @click="editMenu(scope.row.id)">添加下级</el-button>
							<el-button type="text" size="small">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage4" :page-sizes="[20, 40, 60, 100]" :page-size="20"
					layout="prev, pager, next, jumper,sizes,total" :total="200">
				</el-pagination>
			</div>
		</div>

		<!-- 弹框 dialog -->
		<el-dialog class="my-dialog" title="添加菜单" :visible.sync="dialogFormVisible" width="30%">
			<el-form :model="form">
				<el-form-item label="上级菜单" :label-width="formLabelWidth">
					<el-select v-model="form.region" placeholder="--顶级菜单" style="width: 80%">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="菜单名称" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off" style="width: 80%;"></el-input>
				</el-form-item>
				<el-form-item label="路由" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off" style="width: 80%;"></el-input>
				</el-form-item>
				<el-form-item label="排序" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off" style="width: 80%;"></el-input>
				</el-form-item>
				<el-form-item label="是否显示" :label-width="formLabelWidth">
					<el-switch v-model="isShow" active-color="#09f" inactive-color="#ccc" active-text="显示" inactive-text="隐藏">
					</el-switch>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>


	</div>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				name: '',
				loading: false,
				dialogFormVisible: false,
				isShow:true,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '120px',
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				tableData: [{
						sort: 0,
						id: 1,
						router: '/home/menu',
						date: '2016-05-02',
						status: 0,
						name: '菜单管理'
					},
					{
						sort: 1,
						id: 2,
						router: '/home/menu',
						date: '2016-05-02',
						status: 1,
						name: '菜单管理'
					},
					{
						sort: 2,
						id: 1,
						router: '/home/menu',
						date: '2016-05-02',
						status: 1,
						name: '菜单管理'
					},
					{
						sort: 3,
						id: 1,
						router: '/home/menu',
						date: '2016-05-02',
						status: 1,
						name: '菜单管理'
					}
				]
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			// 添加菜单
			addMenu() {
				this.dialogFormVisible = true;
			},
			
			// 编辑菜单
			editMenu(id){
				this.dialogFormVisible = true;
				console.log(id)
			}
		},
		computed: {

		},
		components: {

		},
	}
</script>

<style lang="less">
</style>
